<template>
    <div class="PolicyLayout">
        <!-- 面包屑导航栏 -->
        <Breadcrumb></Breadcrumb>
        <!-- 标题 -->
        <Title>
            <template #default>{{ title }}</template>
        </Title>
        <!-- 内容区 -->
        <section class="contentLayout">
            <!-- 富文本 -->
            <div>
                <!-- 此处注意写法v-model:content -->
                <QuillEditor
                    ref="myQuillEditor"
                    theme="snow"
                    v-model:content="content"
                    :options="data.editorOption"
                    contentType="html"
                    @update:content="setValue()"
                />
                <!-- 使用自定义图片上传 -->
                <input
                    type="file"
                    hidden
                    accept=".jpg,.png"
                    ref="fileBtn"
                    @change="handleUpload"
                />
            </div>
            <div class="btnAll">
                <button @click="reset" class="reset">重置</button>
                <button @click="save" class="save">保存</button>
            </div>
        </section>
    </div>
</template>
    
<script setup>
import Title from "components/public/Title";
import Breadcrumb from "components/public/breadcrumb";
import { useRoute } from "vue-router";
import { PostPolicyInfo } from "@/network/policy";
import { reactive, onMounted, ref, toRaw, watch } from "vue";
// 富文本
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
const props = defineProps(["value"]);
const emit = defineEmits(["updateValue"]);
const content = ref(
    `<p><span style="color: rgb(51, 51, 51);">中信银行成立于1987年，是中国改革开放中</span>最早成立的新兴商业银行之一，是中国最早参与国内外金融市场融资的商业银行，并以屡创中国现代金融史上多个第一而蜚声海内外，为中国经济建设做出了积极的贡献。</p><p><br></p><p><span style="color: rgb(51, 51, 51);">2007年4月，中信银行实现在上海证券交易所和香港联交所“A+H”同步上市；2009年，中信银行成功收购中信国际金融控股有限公司，控股中信银行（国际）有限公司。2015年4月，中信银行英国伦敦代表处开业；7月，中信银行悉尼代表处进入筹备阶段，标志着中信银行新一轮国际化战略正式启动。2015年6月，中信银行入股台湾中国信托金融控股股份有限公司，成为大陆首家赴台投资的股份制商业银行。目前,中信银行总资产超4万亿元人民币，在2015年7月英国《银行家》杂志公布的“世界1000家银行排名”中，中信银行位列一级资本排名第33位，总资产排名第46位；同年5月《福布斯》公布的“全球企业2000强”排名中，中信银行位居第94名，已成为一家资本实力雄厚，具有强大综合竞争力和品牌影响力的国际化金融机构。</span></p><p><br></p><p><span style="color: rgb(51, 51, 51);">在经济新常态和金融市场化的时代背景下，中信银行以“最佳综合融资服务银行”为发展愿景，充分发挥中信集团金融与实业并举的独特竞争优势，全力打造综合化服务平台，提升中信银行核心竞争力的独特优势。</span></p>`
);
const myQuillEditor = ref();
// 通过watch监听回显，笔者这边使用v-model:content 不能正常回显
watch(
    () => props.value,
    (val) => {
        toRaw(myQuillEditor.value).setHTML(val);
    },
    { deep: true }
);
const fileBtn = ref();
const data = reactive({
    content: "",
    editorOption: {
        modules: {
            toolbar: [
                ["bold", "italic", "underline", "strike"],
                [{ size: ["small", false, "large", "huge"] }],
                [{ font: [] }],
                [{ align: [] }],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ indent: "-1" }, { indent: "+1" }],
                [{ header: 1 }, { header: 2 }],
                ["image"],
                [{ direction: "rtl" }],
                [{ color: [] }, { background: [] }],
            ],
        },
        placeholder: "请输入内容...",
    },
});
const imgHandler = (state) => {
    if (state) {
        fileBtn.value.click();

        console.log(content.value);
        console.log(myQuillEditor.value);
    }
};
// 抛出更改内容，此处避免出错直接使用文档提供的getHTML方法
const setValue = () => {
    const text = toRaw(myQuillEditor.value).getHTML();
};
const handleUpload = (e) => {
    const files = Array.prototype.slice.call(e.target.files);
    // console.log(files, "files")
    if (!files) {
        return;
    }
    const formdata = new FormData();
    formdata.append("file", files[0]);
    backsite
        .uploadFile(formdata) // 此处使用服务端提供上传接口
        .then((res) => {
            if (res.data.url) {
                const quill = toRaw(myQuillEditor.value).getQuill();
                const length = quill.getSelection().index;
                quill.insertEmbed(length, "image", res.data.url);
                quill.setSelection(length + 1);
            }
        });
};
// 初始化编辑器
onMounted(() => {
    PolicyInfo();
    const quill = toRaw(myQuillEditor.value).getQuill();
    if (myQuillEditor.value) {
        quill.getModule("toolbar").addHandler("image", imgHandler);
    }
});

//

const route = useRoute();
const title = route.meta.title;

// onMounted(() => {
//     PolicyInfo();
// });

// 初始化
const pageObj = ref({
    page: 1,
    per_page: 1,
    type: "1",
});
// 获取隐私政策信
const PolicyInfo = async () => {
    await PostPolicyInfo(pageObj.value).then((res) => {
        console.log(res);
        content.value = res.data.data.list[0].text;
        console.log(content.value);
    });
};
</script>
    
<style lang="scss" scoped>
.PolicyLayout {
    .contentLayout {
        padding: 0;
        border: none;
        // 调整样式
        .ql-toolbar.ql-snow {
            background: #fff;
        }
        .ql-container.ql-snow {
            background: #fff;
        }
        :deep(.ql-editor) {
            min-height: 180px;
        }
        :deep(.ql-formats) {
            height: 21px;
            line-height: 21px;
        }

        .btnAll {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 20px;
            button {
                width: 64px;
                height: 32px;
                border: 1px solid var(--border-color-tint);
                border-radius: 5px;
            }
            .reset {
                background: #fff;
                color: var(--color-text);
                margin-right: 10px;
            }
            .save {
                background: var(--color-high-text);
                color: #fff;
            }
        }
    }
}
</style>